﻿<template>
  <div>
    <!-- 表格部分 -->
    <QueryBase :show-search="false" operationLayoutMode="onResult" @on-add="handleAdd">

      <el-table :data='table.tableData' style='width:100%' stripe :border="true">
        <el-table-column align-center v-for='item in table.tableColumn' :key='item.indexName' :label='item.text'>
          <template #default='scope'>
            <span>{{ scope.row[item.indexName] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align-center width='260px'>
          <template #default="scope" v-if="action('edit')">
            <el-button type="text" @click="handleModify(scope.row)">修改</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            <!-- <el-link @click="handleAsign(scope.row)" style="padding-right: 5px;"><i
                class='iconfont icon-geren'></i>角色授权</el-link> -->
            <el-button type="text" @click="handleFunc(scope.row)" style="padding-right: 5px;"><i
                class='iconfont icon-lock'></i>功能授权</el-button>
          </template>
        </el-table-column>
      </el-table>
    </QueryBase>
    <!-- 选择登录账号的弹出窗 -->
    <VSelect :roles='roles' :showDialog='showDialog' @giveUp='showDialog = false' @sureSelect='sureSelect'></VSelect>
    <!-- 选择功能的弹窗 -->
    <VFunc :roles='roles' :funcDialog='funcDialog' @giveUpFunc='funcDialog = false' @sureFuncSelect='sureFuncSelect'>
    </VFunc>
    <RoleEditor @onSubmited="() => { getTableData() }" v-model:show="showEditor" :mode="mode" :data="editModel">
    </RoleEditor>
  </div>
</template>

<script lang="ts" setup>
import { delRole, getRoles, saveRoleAuth, updateLogin2Role } from '@/api/authorization';
import elHelper from '@/common/elHelper';
import { reactive, ref } from 'vue';
import VSelect from '@/views/management/limitsManagement/SelectLoginNo.vue'
import VFunc from '@/views/management/limitsManagement/FunctionSelect.vue'
import QueryBase from '@/components/layout/QueryBase.vue';
import { action } from '@/common/actionHelper';
import RoleEditor from '@/components/management/RoleEditor.vue';
import { Plus } from '@element-plus/icons-vue'

const table = reactive({
  tableData: [] as any[],
  tableColumn: [
    {
      text: '角色编号',
      indexName: 'roleno'
    },
    {
      text: '角色名称',
      indexName: 'rolename'
    }
  ]
})
const showDialog = ref(false)
const funcDialog = ref(false)
const currentRole = ref<any>()
const roles = ref('')
const mode = ref('')
const showEditor = ref(false)
const editModel = reactive({
  roleno: '',
  rolename: '',
  roleId: ''
})

const handleAsign = (row) => {
  currentRole.value = row
  roles.value = row.roleno
  showDialog.value = true
}
const handleAdd = () => {
  editModel.roleId = ''
  editModel.rolename = ''
  editModel.roleno = ''
  mode.value = 'add'
  showEditor.value = true
}
const handleModify = (data: any) => {
  Object.assign(editModel, data)
  mode.value = 'modify'
  showEditor.value = true
}
const handleDelete = async (data: any) => {
  if (!await elHelper.showConfirmMsg('确定要删除吗?(删除后将无法恢复)')) return
  let loading = elHelper.showLoading()
  const re = await delRole(data)
  if (re.isSuccess) {
    elHelper.showSuccessMsg('操作成功')
    await getTableData()
  } else {
    elHelper.showErrorMsg(re.msg)
  }
  elHelper.closeLoading(loading)
}
const sureSelect = async (selectRows) => {
  if (selectRows.length) {
    let list: any[] = []
    selectRows.forEach(val => {
      if (val.loginuid) {
        list.push(val.loginuid)
      } else if (val.uid) {
        list.push(val.uid)
      }
    })
    const re = await updateLogin2Role(list.join(), currentRole.value.roleno)
    if (re.isSuccess) {
      elHelper.showSuccessMsg('角色授权成功！')
    } else {
      elHelper.showWarningMsg(re.msg)
    }
  }
}

const handleFunc = (row) => {
  currentRole.value = row
  roles.value = row.roleno
  funcDialog.value = true
}

const sureFuncSelect = async (selectRows, totalFuncs) => {
  console.log(selectRows)
  console.log(currentRole)
  if (selectRows.length) {
    let list: any = []
    selectRows.forEach(val => {
      list.push({
        roleId: currentRole.value.roleId,
        roleno: currentRole.value.roleno,
        functionno: val.function_no,
        actions: val.actions ? val.actions.join() : ''
      })
    })
    const re = await saveRoleAuth(list)
    if (re.isSuccess) {
      funcDialog.value = false
      elHelper.showSuccessMsg('功能授权成功!')

    } else {
      elHelper.showWarningMsg(re.msg)
    }

  } else {
    const re = await saveRoleAuth([])
    if (re.isSuccess) {
      elHelper.showSuccessMsg('功能授权成功!')

    } else {
      elHelper.showWarningMsg(re.msg)
    }
  }
}
const getTableData = async () => {
  if (!action('view')) {
    elHelper.showErrorMsg('权限不足')
    return
  }
  const loading = elHelper.showLoading()
  const re = await getRoles()
  if (re.isSuccess) {
    table.tableData = []
    re.data.forEach(item => {
      table.tableData.push(item)
    })
  } else[
    elHelper.showErrorMsg(re.msg)
  ]
  elHelper.closeLoading(loading)
}
getTableData()
</script>
